<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1、导入vue的包 -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <!-- 将来new的实例会控制这个元素中的所有内容 -->
    <!-- vue 实例控制的区域就是MVVM中的 V -->
    <div id="app">
        <p>{{msg}}</p>  <!-- {{}} 为插入表达式 -->
    </div>
    <script>
        // 2、创建一个vue的实例
        // 当我们导入包之后，在浏览器的内存中就多了一个Vue构造函数
        // new 出来的 vm 对象就是 MVVM 中的 VM 调度者
        var vm = new Vue({
            el: '#app',  // el 表示当前new的这个vue实例，要控制页面上的哪个区域
            // data 就是MVVM中的M， 专门用来保存每个页面的数据
            data : {  // data属性中存放的el中要用到的数据
                msg: 'Hello World' // 通过vue提供的指令，很方便的就能把数据渲染到页面上
            }
        })
    </script>
</body>
</html>